/*変数定義*/
:root{
	font-size:16px;
	--main-color:#3A9F8E;
	--text-color:#383838;
	--red-color:#F95A33;

	--main-color-1:#EFF9F8;/* about txt col*/

	--bg-color:#F2F2F2;/*全体背景色*/
	--content-size:750px;
	--wide-size:1300px;
	--img-radius:clamp(20px,30px,4vw);
	--font-en:"Lato", sans-serif;
	--font-jp:"Noto Sans JP", sans-serif;
	--font-mincho:"source-han-serif-japanese", serif;

	--pr-1-bg-col:#f5dfda;
	--pr-1-col:#fe9d85;

	--pr-2-bg-col:#fbefd3;
	--pr-2-col:#f7ba71;

	--pr-3-bg-col:#CFD9ED;
	--pr-3-col:#587CC2;

	--pr-4-bg-col:#D9ECD9;
	--pr-4-col:#5EC261;

	--fv-left:8.5vw;
	
	--font-size-large:clamp(16px,18px,3vw);
	--font-size-middle:clamp(14px,16px,3vw);
	--font-size-base:clamp(12px,14px,3vw);
	--font-size-small:clamp(10px,12px,3vw);
}
body{
	color:var(--text-color);
}
span{
	font-size:inherit;
}
.font-size-middle{
	font-size:var(--font-size-middle);
}
.font-size-base{
	font-size:var(--font-size-base);
}
.font-size-small{
	font-size:var(--font-size-small);
}

.main_color{
	color:var(--main-color);
}
.red{
	color:var(--red-color);
	font-weight:500;
}
.under{
	text-decoration: underline;
}
.ib{
	display:inline-block;
}

@media (min-width: 769px) {
    body {
        min-width: auto;
    }
}

/* ナビ・フッター */
.grecaptcha-badge ,
#wpadminbar,
.floating_wrap,
.header,
.sticky-menu,
.footer{
    display: none !important;
}
main,
body,
.mv_box,
.mv_content{
	height: 100vh;
}


/* ボタン */
.cta_wrap{
	text-align: center;
	padding:2em 0;
}
.btn{
	position: relative;
	background: #F6BE3C;
	border-radius:100px;
	width:312px;
	max-width:100%;
	height:auto;
	line-height:1;
	/* line-height:1.4em; */
	padding: 1em 0 1em 0;
	/* padding:0.9em; */
	font-size:clamp(14px,19px,4vw);
	/* text-indent:1em; */
	box-shadow:none;
}
.btn:after{
	position: absolute;
	content:"";
	background:url(/assets/img/bacterium-peel-trial/right.svg);
	background-size:contain;
	background-repeat:no-repeat;
	width:1em;
	height:1em;
	display:inline-block;
	margin-left:0.5em;
	vertical-align: baseline;
}
.btn:hover{
	background-color:#ffd470;
}

/* カウントダウン */	
 .countdown{
	margin-top: 2.604vw;
    /* font-size: 90px; */
	font-size: clamp(18px, 80px, 7vw);
    color: #fff;
	height: 1.2em;
	line-height: 1.2em;
 }
.count_item{
	font-size: clamp(1.4em, 2em, 4vw);
	position: relative;
    text-align: center;
    display:inline-block;
    width: 1em;
    line-height:1;
	height: 1em;
}
.count_item::after{
    top: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.3em;
}
.day::after{
	content: "day";
}
.hour::after{
	content: "hr";
}
.min::after{
	content: "min";
} 
.sec::after{
	content: "sec";
}


/* FV・MV*/
.fv_box{
	background: #000;
	max-height: 100vh;
}
.mv_logo{
	position: absolute;
	left: 0;
	right: 0;
	top: 20px;
	margin: auto;
}
.mv_content{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.mv_side{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px 10px 50px;
    /* max-width: 45%; */
    height: 100vh;
    width: clamp(13%,45%,210px);
}
.mv_side img{
	/* max-height: calc(100vh - 80px); */
 }
 .mv_center{
	display: flex;
    flex-direction: column;
    text-align: center;
	max-width: calc(800px + 30vw);
	padding: 0 15vw;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
 }
 .mv_crown{
	margin: 2.604vw 0 3.125vw;
 }
 .mv_crown img{
	width: 50%;
 }
 .copyright{
	position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: auto;
    color: #fff;
    font-size: 10px;
    font-weight: 200;
    line-height: 18px;
    text-align: center;
 }